<template>
	<view class="flex_box flex_direction Travel">
		<view>
			<u-navbar title=" " leftIcon=" " bg-color="transparent" placeholder="true"></u-navbar>
		</view>
		<view class="topbg"></view>
		<view class="topimage_box">
			<view class="left_box">
				<u-image src="/static/travel/icon1.png" width="249rpx" height="38rpx"/>
				<view class="text">-- 风景人事在路上 --</view>
			</view>
			<view class="right_box">
				<u-image src="/static/travel/icon2.png" width="253rpx" height="256rpx" radius="20rpx"/>
			</view>
		</view>
		<u-tabs :list="tabs" lineWidth="60" lineColor="#05B9AE" :itemStyle="{height: '81rpx'}" :current="current" @change="tabsChange"
		:inactiveStyle="{color: '#000', fontSize: '32rpx'}" :activeStyle="{color: '#000',fontWeight: 'bold', fontSize: '32rpx'}"
		></u-tabs>
		<swiper class="record_swiper" :current="swiperCurrent" @change="animationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
				<scroll-view class="record_scroll" scroll-y @scrolltolower="getMore">
					<view class="record_box">
						<view class="record_main">
							<view class="record_item" @click="goDetail(child)"
								v-for="(child,idx) in item.children" :key="idx" >
								<view class="image">
									<u-image :src="child.image" width="200rpx" height="210rpx" radius="26rpx"/>
								</view>
								<view class="text-box">
									<text>{{ child.title }}</text>
									<view class="yyinfo">
										<view>预约人：{{ child.username }}</view><view :class="'color' + child.state">{{ child.state_text }}</view>
									</view>
									<view class="yydate">预约日期：{{ child.date }}</view>
								</view>
							</view>
						</view>
						<view v-if="item.listStatus==='nomore'&&item.children.length===0" class="empty_box">
							<u-empty icon="/static/empty/data.png" text="还没有出行订单，赶紧下一单！"></u-empty>
							<view class="flex_box flex_row_center empty_btn">
								<u-button throttleTime="1000" @click="$goUrl(swiperCurrent == 0 ? '/pages/list/list' : '/pages/home/circuit/circuit','to')" :custom-style="{width: '300rpx',height: '88rpx'}" shape="circle" color="#06BEB6" text="去逛逛"></u-button>
							</view>
						</view>
						<block v-else>
							<u-loadmore @loadmore="getMore" :status="item.listStatus"></u-loadmore>
						</block>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		orderList,
	} from '@/common/http.api.js';
	let that;
	export default {
		data() {
			return {
				tabs: [{
					name: '景区订单'
				}, {
					name: '路线订单',
				}, {
					name: '历史记录'
				}],
				current: 0,
				swiperCurrent: 0,
				list: [{
					children: [],
					listStatus: "nomore",
					page: 1
				}, {
					children: [],
					listStatus: "nomore",
					page: 1
				}, {
					children: [],
					listStatus: "nomore",
					page: 1
				}],
				statusList: [{
					name: "景区订单",
					id: '1'
				},
				{
					name: "路线订单",
					id: '2'
				},
				{
					name: "历史记录",
					id: '3'
				}]
			};
		},
		onLoad() {
			that = this;
			// uni.$on('currentEvent', (data) => {
			// 	console.log('xx666', data)
			//     that.current = data.data || 0;
			// 	that.swiperCurrent = that.current;
			// 	that.getList();
		 //    });
		},
		onShow() {
			let data = uni.getStorageSync('currentOrderType') || 0;
			that.current = data;
			that.swiperCurrent = that.current;
			that.getList();
		},
		onUnload() {
		  // uni.$off('currentEvent');
		},
		methods: {
			tabsChange(tab) {
				that.swiperCurrent = tab.index;
			},
			animationfinish(e) {
				let that = this;
				let current = e.detail.current;
				that.swiperCurrent = current;
				that.current = current;
				that.list[that.current].page = 1, that.list[that.current].children = [], that.list[that.current].listStatus = "loading", that.getList();
			},
			// 获取列表
			getList() {
				let that = this;
				let params = {
					state: that.statusList[that.current].id,
					page: that.list[that.current].page
				}
				orderList({params: params}).then(res => {
					let list = res.data.data;
					that.list[that.current].listStatus = list.length<res.data.per_page?"nomore":"loadmore";
					that.list[that.current].children = that.list[that.current].page == 1 ? [...list] : [...that.list[that.current].children,...list];
				}).catch(err => {
					uni.$u.toast(err.msg);
				});
			},
			// scroll-view到底部加载更多
			getMore() {
				let that = this;
				that.list[that.current].listStatus === "loadmore" && (that.list[that.current].page++, that.list[that.current].listStatus = "loading", that.getList());
			},
			goDetail(child) {
				if (child.type == 1) {
					that.$goUrl('pages/orderDetail/orderDetail','to',{id: child.id})
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.Travel {
		.topbg {
			width: 750rpx;
			height: 597rpx;
			background: linear-gradient(135deg, #BBF4E9, #EDFFFC, #EDFFFC, #EDFFFC, #CCF6F5);
			position:absolute;
		}
		.topimage_box {
			width: 690rpx;
			height: 240rpx;
			margin-top: 80rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 10rpx 0rpx #F3F3F3;
			border-radius: 20rpx;
			z-index: 200;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			position: relative;
			.left_box {
				display: flex;
				flex-direction: column;
				align-items: center;
				.text {
					background: #e5f8f7;
					border-radius: 8rpx;
					margin-top: 30rpx;
					padding: 12rpx 30rpx;
					color: #05B9AE;
					padding-bottom: 20rpx;
				}
			}
			.right_box {
				position: absolute;
				top: -33rpx;
				right: 17rpx;
			}
		}
		.record_swiper {
			width: 100%;
			background-color: #F6F8FA;
			border-radius: 32rpx 32rpx 0 0;
			height: calc(100vh - 70px - 88rpx);
			box-sizing: border-box;
		}
		.record_scroll {
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			padding: 28rpx 0;
		
			.record_box {
				.record_main {
					padding: 0 28rpx;
		
					.record_item {
						display: flex;
						justify-content: space-between;
						background: #FFFFFF;
						border-radius: 20rpx;
						padding: 24rpx;
						margin-top: 23rpx;
						gap: 36rpx;
						.image {
							width: 200rpx;
						}
						.text-box {
							flex: 1;
							text {
								height: 31rpx;
								font-family: Source Han Sans CN;
								font-weight: bold;
								font-size: 32rpx;
								color: #2A2C30;
							}
							.yyinfo {
								margin-top: 33rpx;
								display: flex;
								justify-content: space-between;
								font-family: Source Han Sans CN;
								font-weight: 400;
								font-size: 28rpx;
								color: #AAAAAA;
								.color0 {
									color: #e8c338;
								}
								.color1 {
									color: #05B9AE;
								}
								.color2 {
									color: #E92D2D;
								}
								.color3 {
									color: #AAAAAA;
								}
							}
							.yydate {
								margin-top: 20rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								font-size: 28rpx;
								color: #666666;
							}
						}
						.record_title {
							height: 88rpx;
							font-size: 28rpx;
							font-weight: 500;
							color: #1E272E;
		
							.record_title_status1 {
								color: #00C2FF;
							}
							.record_title_status2 {
								color: #D2DAE2;
							}
						}
		
						.record_detail {
							.record_content {
								width: 470rpx;
								.record_detail_top{
									height: 80rpx;
									margin-bottom: 24rpx;
									.record_name {
										width: 340rpx;
										height: 80rpx;
										font-size: 28rpx;
										color: #1E272E;
										font-weight: 500;
										line-height: 40rpx;
									}
									.record_price{
										color: #FF3F34;
										font-weight: bold;
										line-height: 40rpx;
										font-size: 24rpx;
										text{
											font-size: 32rpx;
										}
									}
									.record_num{
										font-size: 32rpx;
										color: #D2DAE2;
										line-height: 40rpx;
									}
								}
								
		
								.record_date {
									font-size: 24rpx;
									color: #808E9B;
									line-height: 36rpx;
									padding: 0 0 12rpx;
								}
							}
						}
		
					}
				}
			}
		}
	}
</style>
